<script>
import { requestGet, requestPost } from '@/api/system/common'

export default {
  name: 'SendMessageDialog',
  data() {
    return {
      innerVisible: false,
      dataList: [],
      pager: 0,
      query: {
        blurry: '',
        page: 1,
        size: 10
      },
      form: {
        content: '',
        jsr: ''
      },
      multipleSelection: []
    }
  },
  methods: {
    openEntity() {
      this.innerVisible = true
      this.initData()
    },
    querySearch() {
      this.query.page = 1
      this.initData()
    },
    currentChange(row) {
      this.query.page = row
      this.initData()
    },
    getRowKey(row) {
      return row.username
    },
    handleSelectionChange(data) {
      this.multipleSelection = data
    },
    handleClose(data) {
      this.multipleSelection.splice(this.multipleSelection.indexOf(data), 1)
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(item => {
          this.$refs.multipleTable.toggleRowSelection(item)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    sendMessage() {
      if (this.multipleSelection.length > 0) {
        const fsr = []
        this.multipleSelection.forEach(item => {
          fsr.push(item.username)
        })
        this.form.jsr = fsr.join(',')
        if (this.form.content === null || this.form.content === '') {
          this.$message.error('消息内容不能为空！')
        } else {
          requestPost('rest/api/message/v1/inform/send', this.form).then(res => {
            const { data } = res
            console.log(data)
            this.close()
          }).catch(() => {
            this.$message.error('消息推送失败！')
          })
        }
      } else {
        this.$message.error('消息接受人不能为空！')
      }
    },
    initData() {
      requestGet('rest/api/message/v1/inform/user', this.query)
        .then(res => {
          const { data } = res
          this.dataList = data.data
          this.pager = data.pager
        }).catch(() => {
          this.dataList = []
        })
    },
    close() {
      this.innerVisible = false
      this.multipleSelection = []
      this.dataList = []
      this.form.jsr = ''
      this.form.content = ''
      this.query.page = 1
      this.query.size = 10
      this.query.blurry = ''
      this.pager = 0
      this.$emit('callback')
    }
  }
}
</script>

<template>
  <el-dialog
    width="60%"
    title="消息推送"
    :visible.sync="innerVisible"
    append-to-body
  >
    <div class="dialog-body">
      <div class="dialog-left">
        <div class="dialog-header">
          <el-input v-model="query.blurry" placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="querySearch" />
          </el-input>
        </div>
        <el-table
          ref="multipleTable"
          :data="dataList"
          tooltip-effect="dark"
          style="width: 100%"
          :row-key="getRowKey"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
          />
          <el-table-column
            prop="nickName"
            label="姓名"
            show-overflow-tooltip
          />
          <el-table-column
            prop="username"
            label="工号"
            show-overflow-tooltip
          />
        </el-table>
        <el-pagination
          :current-page="query.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.size"
          layout="prev, pager, next"
          :total="pager"
          @current-change="currentChange"
        />
      </div>
      <div class="dialog-right">
        <div class="right-header">
          <el-tag
            v-for="tag in multipleSelection"
            :key="tag.username"
            class="custom-tag"
            closable
            :type="'success'"
            @close="handleClose(tag)"
          >
            {{ tag.nickName }}
          </el-tag>
        </div>
        <div class="right-body">
          <el-input
            v-model="form.content"
            type="textarea"
            placeholder="请输入内容"
            maxlength="50"
            show-word-limit
          />
        </div>
        <div class="content-bottom">
          <el-button type="primary" @click="sendMessage">发送消息</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.dialog-body {
  width: 100%;
  height: 600px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  .dialog-left {
    width: 400px;
    height: 100%;
    border-right: 1px solid #eeeeee;
    .dialog-header {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      box-sizing: border-box;
    }
  }
  .dialog-right {
    flex: 1 1;
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    .right-header {
      flex: 1 1;
      width: 100%;
      border-bottom: 1px solid #eeeeee;
    }
    .right-body {
      width: 100%;
      height: 100px;
      margin-top: 10px;
    }
    .content-bottom {
      width: 100%;
      height: 100px;
      margin-top: 10px;
      text-align: center;
    }
  }
}
.custom-tag {
  margin-left: 10px;
}
</style>
